<template>
  <div id="yh">
    <common-head father-name="内容管理" child-name="广告管理"></common-head>
    <!--<div id="title" style="text-align: left">查询条件</div>-->

    <div id="crazy_hat">
      <div class="div_out">
        <div id="search_bar">
          <div class="span">
            <span class="star">*</span>广告名称：
            <div class="div_inner">
              <el-input v-model="name"  placeholder="请输入名称"></el-input>
            </div>
          </div>
          <div class="span">
            <span class="star">*</span> 广告位置：
            <div class="div_inner">

              <el-select v-model="position"  placeholder="全部"  size="small">
                <el-option v-for="item in position_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="span">
            <span class="star">*</span> 上线状态：

            <div class="div_inner">

              <el-select v-model="status"  placeholder="全部" size="small">
                <el-option v-for="item in status_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="span">
            <el-button type="primary" size="small" @click="getAdvertise" icon="el-icon-search">查询</el-button>
          </div>

          <div class="span">
            <el-button size="small" @click="reset" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>

        <div style="text-align: left"><h3>广告列表</h3></div>
        <div id="handle1">
          <div class="span">
            <el-button class="el-icon-plus" @click="dialogVisible=true" type="primary" size="small" style="">新增</el-button>
          </div>
          <div class="span">
            <el-button class="el-icon-delete" @click="" type="danger" size="small">删除</el-button>
          </div>
         <!-- <div class="span">
            <el-button onclick="" type="success" size="small" plain>上线</el-button>
          </div>
          <div class="span">
            <el-button onclick="" type="warning" size="small"  plain>下线</el-button>
          </div>-->
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column prop="id" label="广告编号" align="center" sortable>
          </el-table-column>
          <el-table-column prop="name" label="广告名称" align="center" >
          </el-table-column>

          <el-table-column prop="image" label="商品图片" align="center" >
            <!--<div class="image">
              <div class="block" v-for="fit in fits" :key="fit">
                <el-avatar shape="square" :size="50" :fit="fit" :src="url"></el-avatar>
              </div>
            </div>-->
            <template slot-scope="scope">
              <img :src="scope.row.image" style="width: 60px;height: 60px;"/>
            </template>
          </el-table-column>

          <el-table-column prop="jumpAddress" label="跳转地址" align="center">
          </el-table-column>
          <el-table-column prop="position" label="广告位置" align="center" >
          </el-table-column>
          <el-table-column prop="advertiseTime" label="广告时间" align="center" sortable>
          </el-table-column>

          <el-table-column
            label="上线/下线"
          >
            <template  slot-scope="scope">
              <span v-if="scope.row.useing">
                <el-switch
                  v-model="value2"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </span>
              <span v-else>
                <el-switch
                  v-model="value3"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </span>

            </template>
          </el-table-column>

          <el-table-column fixed="right" prop="manager" label="操作" align="center" >
            <template slot-scope="scope">
              <el-button @click="dialogVisible" type="text" size="mini" >编辑</el-button>
              <el-button @click="" type="text" size="mini" >置顶</el-button>
              <el-button @click="" type="text"  size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <div style="float: right;margin-top: 5px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15]"
            :page-size= 'size'
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

        <el-dialog title="添加广告" :visible.sync="dialogVisible" width="40%">
          <el-form>
            <el-form-item label="广告名称:" :label-width="formWidth">
              <el-input autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>

            <el-form-item label="广告位置:" :label-width="formWidth" size="medium">
              <el-select  placeholder="全部" style="width: 575px;">
                <el-option label="湖南卫视第一帧" value=""></el-option>
                <el-option label="湖南卫视第二帧" value=""></el-option>
                <el-option label="湖南卫视第三帧" value=""></el-option>
                <el-option label="湖南卫视第四帧" value=""></el-option>
                <el-option label="湖南卫视第五帧" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上传图片:" :label-width="formWidth">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
                </div>
              </el-upload>
            </el-form-item>

            <el-form-item label="跳转地址(选填):" :label-width="formWidth">
              <el-input placeholder="请输入地址" v-model="input1">
                <template slot="prepend">Http://</template>
              </el-input>
            </el-form-item>

            <el-form-item label="发布日期:" :label-width="formWidth">
              <el-radio-group v-model="radio">
                <el-radio label="1" >手动发布</el-radio>
                <el-radio label="2">定时发布</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-date-picker
            v-if='radio==2'
            v-model="value1"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>

          </div>
        </el-dialog>


      </div>
    </div>


  </div>
</template>

<script>
  //广告编号id 广告名称name 图片image  跳转地址jumpAddress
  import CommonHead from "../system/common/commonHead";
  export default {
    name: "AdvertisingManage",
    components: {CommonHead},
    created() {
      this.getAdvertise();
    },
    data() {
      return {
        mes:{
          user_name:'alice',
          title:'广告管理',
          router:['首页','内容管理','广告管理']
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        position_options:[{
          value: '服务频道第一帧',
          label: '服务频道第一帧'
        }, {
          value: '服务频道第二帧',
          label: '服务频道第二帧'
        }, {
          value: '服务频道第三帧',
          label: '服务频道第三帧'
        },{
          value: '服务频道第四帧',
          label: '服务频道第四帧'
        }, {
        value: '服务频道第五帧',
          label: '服务频道第五帧'
      }, {
        value: '服务频道第六帧',
          label: '服务频道第六帧'
      }],
        status_options: [{
          value: 3,
          label: '全部'
        }, {
          value: 1,
          label: '上线'
        }, {
          value: 0,
          label: '未上线'
        }],
        name:null,
        position:null,
        status:null,
        tableData:[],
        currentPage4: 1,
        total:0,
        size:5,
        value2:false,
        value3:true,
        radio: '1',
        value1: '',
        input1: '',
        dialogImageUrl: '',
        disabled: false,
        dialogVisible: false,
        formWidth: '150px',
        value:'100',
        fits: ['fill'],
        url: 'http://pic1.cxtuku.com/00/14/26/b344c1c339fe.jpg',

        multipleSelection: []
      }
    },
    methods: {
      getAdvertise(){
        this.axios.get('micro-content-server/advertise/all',{
          params:{
            name:this.name,
            position:this.position,
            status:this.status,
          }
        }).then(res => {
          console.log(res.data);
          this.tableData=res.data.data;
          this.total=res.data.data.total;
        })
      },
      reset:function () {
        this.name=null;
        this.position=null;
        this.status=null,
        this.getAdvertise();

      },
      handleSizeChange(val) {
        this.tableData=[]
        this.currentPage4 = 1
        if(all.length < val){
          for (let i=0;i<all.length;i++){
            this.tableData[i] = all[i]
          }
        }else {
          for (let i=0;i<val;i++){
            this.tableData[i] = all[i]
          }
        }
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.tableData=[]
        let j = this.size
        let start = j * (val - 1 )
        if(all.length > val*this.size){
          for (let i=0;i<j;i++){
            this.tableData[i] = all[i+start]
          }
        }else {
          for (let i=0;i<all.length-start;i++){
            this.tableData[i] = all[i+start]
          }
        }

      },
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //条件查询
      search() {
        console.log(this.searchCategory.categoryName);
        console.log(this.searchCategory.createTime);
        this.axios.post("micro-content-server/advertise/findByCondition", this.searchCategory).then(res => {
          console.log("this.searchCategory.categoryName:"+this.searchCategory.categoryName);
          console.log("this.searchCategory.createTime:"+this.searchCategory.createTime);
          console.log(res.data.data);
          this.tableData = res.data.data;
          this.reload();
        })
      },
    }
  }




</script>

<style scoped>
  #yh{
    width:1500px;
    margin: 0 auto;
    margin-top: 55px;

  }

  #crazy_hat{
    height:50px;
   background-color: lavender;
    text-align:center;
    line-height:50px;
    margin-top: 10px;
  }
  .div_out {
    margin-top: 15px;
  }
/*  .div_inner{
    position: relative;
    font-size: 14px;
    display: inline-block;

  }*/
  .star{
    color:red;
  }

  /*.span{
    display: inline-block;
    margin-left: 30px;
  }*/
  .div_inner {
    position: relative;
    font-size: 14px;
    display: inline-block;
  }

  .span {
    display: inline-block;
    margin-left: 30px;
  }

  #search_bar {
    height: 80px;
    background-color: lavender;
    text-align: center;
    line-height: 80px;
    margin-left: -38px;
    margin-top: 5px;
  }
 /* #handle{
    margin-right: 329px;
    margin-top: 5px;
  }*/
  #handle1{
    margin-right: 1104px;
    margin-top: 5px;
  }

  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }



</style>
